<style scoped lang="scss">
    ::v-deep .el-drawer__header {
        background-color: #f5f5f5;
        padding: 20px;
        margin-bottom: 20px;

        span {
            font-size: 20px;
        }
    }

    ::v-deep .custom-drawer {
        max-width: 1100px;
    }

    ::v-deep .el-drawer__body {
        padding: 0 20px 20px;
        overflow-y: auto;

        .demo-drawer__content {
            display: flex;
            flex-direction: column;
            height: 100%;

            .demo-drawer__main {
                overflow-y: auto;
            }

            .demo-drawer__footer {
                display: flex;
                justify-content: flex-end;
            }
        }
    }

    .avatar-uploader ::v-deep .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader ::v-deep .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 150px;
        height: 150px;
        line-height: 150px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }


</style>
<template>
    <div class="page" v-loading="loading">
        <el-row class="m-b-0">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                    <el-button type="primary" size="medium" icon="el-icon-plus"
                               @click="addHandler">添加文章
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" size="medium" icon="el-icon-delete" @click="deleteArticles">删除选中文章
                    </el-button>
                </el-form-item>
                <el-form-item label="">
                    <el-cascader style="width: 100%"
                                 placeholder="按分类筛选"
                                 @change="()=>{filter.page=1; getData()}"
                                 v-model="filter.categoryId"
                                 :options="categories"
                                 :props="{ checkStrictly: true,label:'name',value:'id', emitPath:false, expandTrigger:'hover' }"
                                 clearable></el-cascader>
                </el-form-item>
                <el-form-item label="">
                    <el-input placeholder="按关键字搜索" v-model="filter.keywords" clearable>
                        <el-button slot="append" icon="el-icon-search"
                                   @click="()=>{ filter.page=1; getData() }"></el-button>
                    </el-input>
                </el-form-item>
            </el-form>

        </el-row>

        <el-table
                ref="articleTable"
                :data="tableData.items"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column prop="id" label="Id" width="80" show-overflow-tooltip></el-table-column>
            <el-table-column prop="title" label="标题">
                <template slot-scope="scope">
                    <!--<a :href="'/content/'+scope.row.id" target="_blank">{{scope.row.title}}</a>-->
                    {{scope.row.title}}
                </template>
            </el-table-column>
            <el-table-column prop="viewCount" label="访问量" width="120"></el-table-column>
            <el-table-column label="属性" width="160">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.recommend" style="margin-right: 5px">荐</el-tag>
                    <el-tag type="info" v-if="scope.row.onlySpider" style="margin-right: 5px">蜘蛛</el-tag>
                    <el-tag type="primary" v-if="scope.row.focus">焦</el-tag>
                </template>
            </el-table-column>
            <!--<el-table-column prop="category" abel="分类"></el-table-column>-->
            <el-table-column prop="creationTime" label="创建时间" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="editHandle(scope.row)" type="" size="small">编辑
                    </el-button>
                    <el-button type="danger" size="small" @click="handleDelete([scope.row.id])" plain>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block m-t-20">
            <el-pagination
                    @size-change="(_size)=>{ filter.size = _size; getData()}"
                    @current-change="(p)=>{ filter.page = p; getData()}"
                    :current-page="filter.page"
                    :page-sizes="defaultPageSize"
                    :page-size="filter.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    background
                    :total="tableData.totalCount">
            </el-pagination>
        </div>

        <el-drawer
                title="编辑文章"
                :visible.sync="dialogVisible"
                direction="ltr"
                size="80%"
                custom-class="custom-drawer">
            <div class="demo-drawer__content">
                <div class="demo-drawer__main">
                    <div class="form1" style="margin-right: 10px;">
                    <el-form :model="editModel" v-loading="editLoading" ref="editForm" label-width="70px"
                             class="demo-model">
                        <el-form-item label="标题" prop="title" verify empty-message="请输入标题">
                            <el-input v-model="editModel.title" clearable maxlength="150" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="SEO标题" prop="seoTitle">
                            <el-input v-model="editModel.seoTitle" clearable maxlength="150" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="权重词" prop="rankKeywords">
                            <el-input v-model="editModel.rankKeywords" placeholder="具有权重的词，只能设一个，其它文章会自动生成外链" clearable
                                      maxlength="150" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="分类" prop="categoryId"  verify empty-message="请选择分类">
                            <el-cascader style="width: 100%"
                                         v-model="editModel.categoryId"
                                         :options="categories"
                                         :props="{ multiple: false, checkStrictly: true,label:'name',value:'id', emitPath:false, expandTrigger:'hover' }"
                                         clearable></el-cascader>
                        </el-form-item>

                        <el-form-item label="属性">
                            <el-checkbox v-model="editModel.recommend">推荐</el-checkbox>
                            <el-checkbox v-model="editModel.onlySpider">仅供蜘蛛引流</el-checkbox>
                            <el-checkbox v-model="editModel.focus">焦点图</el-checkbox>
                        </el-form-item>

                        <el-form-item label="摘要" prop="description">
                            <el-input type="textarea" v-model="editModel.description" clearable maxlength="300"
                                      show-word-limit
                                      :rows="4"></el-input>
                        </el-form-item>
                        <el-form-item label="内容" prop="content" style="height: 485px;">
                            <vue-ueditor-wrap v-model="editModel.content" :config="defaultUEditorConfig"
                                              @ready="ueReady"></vue-ueditor-wrap>
                        </el-form-item>
                        <el-form-item label="标签" prop="tagIDsOrNewTagNames">
                            <el-select
                                    v-model="editModel.tagIDsOrNewTagNames"
                                    multiple
                                    filterable
                                    clearable
                                    allow-create
                                    default-first-option
                                    placeholder="请选择文章标签" style="width: 100%">
                                <el-option
                                        v-for="item in tags"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="缩略图" prop="image">
                            <div>
                                <el-input v-model="editModel.image" max-length="150" clearable></el-input>
                                <div style="display: flex; flex-direction: row; justify-items: center">
                                    <el-upload
                                            class="avatar-uploader"
                                            accept="image/jpeg,image/gif,image/png"
                                            :action="eleUploadUrl"
                                            name="upfile"
                                            :show-file-list="false"
                                            :on-success="uploadSuccess"
                                            :before-upload="uploadSuccess"
                                            style="margin-top: 15px; line-height: normal">
                                        <img v-if="editModel.image" :src="editModel.image" class="avatar"/>
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    <div style="flex: 1; padding: 15px 0 0 20px;">
                                        <el-button plain @click="chooseImage">从内容中选取封面图</el-button>
                                    </div>
                                </div>
                            </div>
                        </el-form-item>
                    </el-form>
                    </div>
                </div>
                <div class="demo-drawer__footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm" :loading="editLoading">{{ editLoading ? '提交中
                        ...' : '保 存' }}
                    </el-button>
                </div>
            </div>
        </el-drawer>

    </div>
</template>

<script>
    let pagerHeader = {
        title: '抽屉式弹窗',
        desc: '点击“添加文章”按钮试试',
        breadcrumb: ['系统', '文章管理']
    }

    let modelStr = JSON.stringify({
        title: null,
        seoTitle: null,
        rankKeywords: null,
        description: '',
        content: '',
        image: null,
        sortRank: 0,
        recommend: false,
        onlySpider: false,
        focus: false,
        //categoryIds: [],
        categoryId: null,
        tagIDsOrNewTagNames: [],
        id: null, // guid
    })
    import VueUeditorWrap from 'vue-ueditor-wrap'
    export default {
        name: 'drawer',
        components: {VueUeditorWrap},
        data() {
            return {
                categories: [],
                loading: false,
                filter: {
                    keywords: null,
                    categoryId: null,
                    page: 1,
                    size: 20,
                },
                tableData: {
                    items: [],
                    totalCount: 0
                },
                multipleSelection: [],

                editModel: JSON.parse(modelStr),

                dialogVisible: false,
                editLoading: false,
            }
        },
        activated() {
            this.init()
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                this.setPageHead(pagerHeader);
                //加载分类和文章
                this.getCategories();
                this.getData();
            },
            ueReady(ue){
                let that = this;
                ue.execCommand('serverparam', function(editor) {
                    return {
                        'dir': '' //设置富文本编辑器请求时，携带的额外参数
                    };
                });
            },
            getCategories() {
                this.$apis.articles.getCategoryTreeList({page: 1, size: 15}).then(r => {
                    this.categories = r.result;
                }).catch(e => {
                })
            },
            getData() {
                this.loading = true;
                this.$apis.articles.getAll(this.filter).then(r => {
                    this.loading = false;
                    if (r.success) {
                        this.tableData = r.result
                    } else {
                        this.$msg.alert.error(r.error.message)
                    }
                }).catch(e => {
                    this.loading = false;
                })
            },
            addHandler() {
                if(this.editModel.id>0){
                    this.editModel = JSON.parse(modelStr);
                }
                this.dialogVisible = true;
            },

            deleteArticles() {
                if (this.multipleSelection.length === 0) {
                    this.$message.warning('请选中要删除的数据')
                    return
                }
                this.handleDelete(this.multipleSelection.map(x => x.id))
            },
            handleDelete(ids) {
                this.$confirm('此操作将永久删除数据, 是否继续?', '', {
                    confirmButtonText: '是',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading = true;
                    this.$apis.articles.deletes(ids).then(r => {
                        this.loading = false;
                        if (r.success) {
                            this.getData()
                            this.$msg.notify.success('删除成功');
                        } else {
                            this.$msg.alert.error(r.error.message)
                        }
                    }).catch(e => {
                        this.loading = false;
                    })
                }).catch(() => {
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            submitForm(){
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.editLoading = true

                    }
                })
            }
        }
    }
</script>
